<template>
  <div>
    <div :id="randomId" :style="{width: width+'px', height: height+ 'px'}" />
    <!--        <div v-if="regulate && camera.typeCode=='ROTATION'" class="btn_box">-->
    <!--          <el-button-group>-->
    <!--            <el-button size="small" icon="el-icon-top-left" @click="directionControl(4)" />-->
    <!--            <el-button size="small" icon="el-icon-top" @click="directionControl(0)" />-->
    <!--            <el-button size="small" icon="el-icon-top-right" @click="directionControl(6)" />-->
    <!--            <el-button size="small" icon="el-icon-back" @click="directionControl(2)" />-->
    <!--            <el-button size="small" icon="el-icon-video-play" @click="stopTurn" />-->
    <!--            <el-button size="small" icon="el-icon-right" @click="directionControl(3)" />-->
    <!--            <el-button size="small" icon="el-icon-bottom-left" @click="directionControl(5)" />-->
    <!--            <el-button size="small" icon="el-icon-bottom" @click="directionControl(1)" />-->
    <!--            <el-button size="small" icon="el-icon-bottom-right" @click="directionControl(7)" />-->
    <!--          </el-button-group>-->
    <!--        </div>-->
    <div v-if="regulate && camera.typeCode=='ROTATION'" class="rotate-btn">
      <i class="iconfont icon-top" @click="directionControl(0)" />
      <i class="iconfont icon-right" @click="directionControl(3)" />
      <i class="iconfont icon-down" @click="directionControl(1)" />
      <i class="iconfont icon-left" @click="directionControl(2)" />
      <i class="iconfont icon-play" @click="stopTurn" />
    </div>
  </div>
</template>

<script>
import EZUIKit from 'ezuikit-js'
import { postHandle } from '../../api'
import axios from 'axios'
export default {
  name: 'Ezuikit',
  props: {
    camera: {
      type: Object
    },
    width: {
      type: Number
    },
    height: {
      type: Number
    },
    templateType: {
      type: String,
      default: 'simple'
    },
    regulate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      accessToken: null,
      player: null
    }
  },
  computed: {
    randomId() {
      var Num = ''
      for (var i = 0; i < 6; i++) {
        Num += Math.floor(Math.random() * 10)
      }
      return 'container-' + Num
    }
  },
  watch: {
    camera(val) {
      this.init()
    },
    accessToken(val) {
      this.init()
    }
  },
  async created() {
    this.accessToken = await this.getToken()
    
  },
  // mounted() {
  //   this.init()
  // },
  methods: {
    getToken() {
      return new Promise((resolve, reject) => {
        axios({
          url: 'https://open.ys7.com/api/lapp/token/get',
          method: 'post',
          params: { appKey: this.camera.appKey, appSecret: this.camera.appSecret }, // 传入摄像头的appkey和appsecrect
          timeout: 2000
        }).then(res => {
          let data = res.data
          if (data.code == 200) {
            resolve(data.data.accessToken)
          } else {
            reject(data.msg)
            this.$message.error(data.msg)
          }
        }).catch(error => {
          console.error(error)
          reject(error)
        })
      })
    },
    init() {
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: this.randomId,
        accessToken: this.accessToken,
        url: this.camera.url,
        template: this.templateType, // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        // header: ['capturePicture', 'save', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖
        // plugin: ['talk'], // 加载插件，talk-对讲
        // 视频下方底部控件
        // footer: ['talk', 'broadcast', 'hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
        audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
        handleError: (data) => {
          
         
        },
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        width: this.width,
        height: this.height
      })
      setTimeout(() => {
        this.player.openSound()// 方法调用示例，10秒后关闭视频
      }, 10000)
    },
    directionControl(num) {
      axios({
        url: 'https://open.ys7.com/api/lapp/device/ptz/start',
        method: 'post',
        params: {
          accessToken: this.accessToken,
          deviceSerial: this.camera.deviceSerial,
          channelNo: this.camera.channelNo,
          direction: num,
          speed: 1
        }
      }).then(res => {
        let data = res.data
        if (data.code != 200) {
          this.$message.error(data.msg)
        }
      }).catch(error => {
        console.error(error)
      })
    },
    stopTurn() {
      axios({
        url: 'https://open.ys7.com/api/lapp/device/ptz/stop',
        method: 'post',
        params: {
          accessToken: this.accessToken,
          deviceSerial: this.camera.deviceSerial,
          channelNo: this.camera.channelNo,
          speed: 1
        }
      }).then(res => {
        let data = res.data
        if (data.code != 200) {
          this.$message.error(data.msg)
        }
      }).catch(error => {
        console.error(error)
      })
    }
  }
}
</script>

<style scoped>
.btn_box{
  position: absolute;
  z-index: 999;
  top: 55px;
  width: 150px;
  text-align: center;
  line-height: 40px;
  right: 10px;
}
</style>
